import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { useInitialState } from '@/hooks'
import { addChannel, delChannel, getAllChannel } from '@/store/actions/home'
import { useState } from 'react'
import { Channel } from '@/types/data'
type Props = {
  onClose: () => void
}
const Channels = ({ onClose }: Props) => {
  // 1. 获取我的频道列表数据
  const { userChannel } = useSelector((state: RootState) => state.home)
  // 2. 获取推荐频道
  const { restChannel, channelActiveKey } = useInitialState(
    getAllChannel,
    'home'
  )
  // 3. 编辑状态切换
  const [isEdit, setIsEdit] = useState(false)

  const onChangeEdit = () => {
    setIsEdit(!isEdit)
  }

  // 4. 点击切换我的频道（高亮）
  const dispatch = useDispatch()

  const onChannelClick = (channle: Channel) => {
    // dispatch({ type: 'home/changeTab', payload: key })
    // onClose()
    if (!isEdit) {
      dispatch({ type: 'home/changeTab', payload: channle.id + '' })
      return onClose()
    }
    // 5. 删除我的频道
    if (
      channle.id === 0 ||
      channelActiveKey === channle.id.toString() ||
      userChannel.length <= 4
    )
      return
    // if (userChannel.length <= 4) return
    dispatch(delChannel(channle))
  }

  // 6. 添加频道
  const onAddChannel = (channel: Channel) => {
    dispatch(addChannel(channel))
  }
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon onClick={onClose} type="iconbtn_channel_close" />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', isEdit && 'edit')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span className="channel-item-edit" onClick={onChangeEdit}>
              {isEdit ? '保存' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannel.map((item) => (
              <span
                key={item.id}
                onClick={() => onChannelClick(item)}
                className={classnames(
                  'channel-list-item',
                  channelActiveKey === item.id + '' && 'selected'
                )}>
                {item.name}
                {/* 排除 推荐 以及 当前选中项的 删除的图标 */}
                {item.id !== 0 && item.id.toString() !== channelActiveKey && (
                  <Icon type="iconbtn_tag_close" />
                )}
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {/* <span className="channel-list-item">+ HTML</span> */}
            {restChannel.map((item) => (
              <span
                key={item.id}
                onClick={() => onAddChannel(item)}
                className="channel-list-item">
                + {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
